<!DOCTYPE html>
<html>
<head>
<title>文件上传</title>
	<#include "/header.html">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap-table.min.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/plugins/treegrid/jquery.treegrid.css">
	<script src="${request.contextPath}/statics/libs/bootstrap-table.min.js"></script>
	<script src="${request.contextPath}/statics/plugins/treegrid/jquery.treegrid.min.js"></script>
	<script src="${request.contextPath}/statics/plugins/treegrid/jquery.treegrid.bootstrap3.js"></script>
	<script src="${request.contextPath}/statics/plugins/treegrid/jquery.treegrid.extension.js"></script>
	<script src="${request.contextPath}/statics/plugins/treegrid/tree.table.js"></script>
	<script src="${request.contextPath}/statics/libs/ajaxupload.js"></script>
</head>
<body>
<div id="rrapp" v-cloak>
	<div v-show="showList">
		<div class="grid-btn">
			<a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
			<a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
		</div>
		<table id="menuTable" data-mobile-responsive="true" data-click-to-select="true">
			<thead>
			<tr>
				<th data-field="selectItem" data-checkbox="true"></th>
			</tr>
			</thead>
		</table>
    </div>
    
    <div v-show="!showList" class="panel panel-default">
		<div class="panel-heading">{{title}}</div>
		<form class="form-horizontal">

			<form class="form-horizontal">
				<div class="form-group">
					<div class="col-sm-2 control-label">类型</div>
					<label class="radio-inline">
						<input type="radio" name="type" value="0" v-model="menu.type"/>文件
					</label>
					<label class="radio-inline">
						<input type="radio" name="type" value="1" v-model="menu.type"/> 文件夹
					</label>
				</div>

			<div class="form-group">
				<div class="col-sm-2"><button class="btn btn-primary"  id="upload">点击上传</button></div>
				<div class="col-sm-10">
					<input  type="text" class="form-control" style="cursor:pointer;" v-model="menu.url" readonly="readonly" placeholder="点击上传"/>
				</div>
			</div>

				<div class="form-group">
					<div class="col-sm-2 control-label">上级目录</div>
					<div class="col-sm-10">
						<input type="text" class="form-control" style="cursor:pointer;" v-model="menu.parentName" @click="menuTree" readonly="readonly" placeholder="根目录"/>
					</div>
				</div>

			<div class="form-group">
				<div class="col-sm-2 control-label"></div> 
				<input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
				&nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
			</div>
		</form>
	</div>
</div>
<!--<img src="http://localhost:8080/zte-sdu/sys/oss/getimage/1">-->
<script>
    var Menu = {
        id: "menuTable",
        table: null,
        layerIndex: -1
    };
    /**
     * 初始化表格的列
     */
    Menu.initColumn = function () {
        var columns = [
            {field: 'selectItem', radio: true},
			{title: 'ID', field: 'id', visible: false, align: 'center', valign: 'middle', width: '80px'},
            {title: '名称', field: 'name', align: 'center', valign: 'middle', sortable: true, width: '180px'},
            {title: 'URL', field: 'url', align: 'center', valign: 'middle', sortable: true, width: '100px'},
            {title: '上级', field: 'parentName', align: 'center', valign: 'middle', sortable: true, width: '180px'},
            {title: '类型', field: 'type', align: 'center', valign: 'middle', sortable: true, width: '100px', formatter: function(item, index){
                    if(item.type === 1){
                        return '<span class="label label-primary">文件夹</span>'
							//'<button class="label label-danger"><i class="fa fa-folder-open" aria-hidden="true"></i></button><input type="file" id="'+item.id+'" class="label label-danger"><i class="fa fa-picture-o" aria-hidden="true"></i></input><button class="label label-danger"><i class="fa fa-trash" aria-hidden="true"></i></button>';
                    }
                    if(item.type === 0){
                        return '<span class="label label-success">文件</span>'
							//'<button class="label label-danger"><i class="fa fa-trash" aria-hidden="true"></i></button>';
                    }
                }}
]
        return columns;
    };
    $(function () {
        var colunms = Menu.initColumn();
        var table = new TreeTable(Menu.id, baseURL + "forYoung/news/list", colunms);
        table.setExpandColumn(0);
        table.setIdField("id");
        table.setCodeField("id");
        table.setParentCodeField("parentId");
        table.setExpandAll(false);
        table.init()
        Menu.table = table;

    });
    var vm = new Vue({
        el:'#rrapp',
        data:{
            showList: true,
            title: null,
            menu:{
                parentName:null,
                parentId:0,
                type:1,
                orderNum:0,
                url:null
            }
        },
        methods: {
            getMenu: function(menuId){
                //加载菜单树
                $.get(baseURL + "sys/menu/select", function(r){
                    ztree = $.fn.zTree.init($("#menuTree"), setting, r.menuList);
                    var node = ztree.getNodeByParam("menuId", vm.menu.parentId);
                    ztree.selectNode(node);

                    vm.menu.parentName = node.name;
                })
            },
            add: function(){
                vm.showList = false;
                vm.title = "新增";
                vm.menu = {parentName:null,parentId:0,type:1,orderNum:0,url:null};
                vm.getMenu();
                var selected = $('#menuTable').bootstrapTreeTable('getSelections');
                var id=null;
                if (selected.length != 0) {
                    id=selected[0].id
                }
                new AjaxUpload('#upload', {
                    action: baseURL + "forYoung/news/upload",
                    name: 'file',
                    autoSubmit:true,
                    responseType:"json",
					data:"id="+id,
                    onSubmit:function(file, extension){
                        if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))){
                            alert('只支持jpg、png、gif格式的图片！');
                            return false;
                        }
                    },
                    onComplete : function(file, r){
                        if(r.code == 0){
                           // alert(r);
                            vm.menu.url=r.url
                            //vm.reload();
                        }else{
                            alert(r.msg);
                        }
                    }
                });



            },
            update: function () {
                var menuId = getMenuId();
                if(menuId == null){
                    return ;
                }

                $.get(baseURL + "sys/menu/info/"+menuId, function(r){
                    vm.showList = false;
                    vm.title = "修改";
                    vm.menu = r.menu;

                    vm.getMenu();
                });
            },
            del: function () {
                var id = getMenuId();
                if(id == null){
                    return ;
                }

                confirm('确定要删除选中的记录？', function(){
                    $.ajax({
                        type: "POST",
                        url: baseURL + "forYoung/news/delete",
                        data: "id=" + id,
                        success: function(r){
                            if(r.code === 0){
                                alert('操作成功', function(){
                                    vm.reload();
                                });
                            }else{
                                alert(r.msg);
                            }
                        }
                    });
                });
            },
            saveOrUpdate: function () {
                if(vm.validator()){
                    return ;
                }

                var url = vm.menu.menuId == null ? "sys/menu/save" : "sys/menu/update";
                $.ajax({
                    type: "POST",
                    url:  baseURL + url,
                    contentType: "application/json",
                    data: JSON.stringify(vm.menu),
                    success: function(r){
                        if(r.code === 0){
                            alert('操作成功', function(){
                                vm.reload();
                            });
                        }else{
                            alert(r.msg);
                        }
                    }
                });
            },
            menuTree: function(){
                layer.open({
                    type: 1,
                    offset: '50px',
                    skin: 'layui-layer-molv',
                    title: "选择菜单",
                    area: ['300px', '450px'],
                    shade: 0,
                    shadeClose: false,
                    content: jQuery("#menuLayer"),
                    btn: ['确定', '取消'],
                    btn1: function (index) {
                        var node = ztree.getSelectedNodes();
                        //选择上级菜单
                        vm.menu.parentId = node[0].menuId;
                        vm.menu.parentName = node[0].name;

                        layer.close(index);
                    }
                });
            },
            reload: function () {
                vm.showList = true;
                Menu.table.refresh();
            },
            validator: function () {
                if(isBlank(vm.menu.name)){
                    alert("菜单名称不能为空");
                    return true;
                }

                //菜单
                if(vm.menu.type === 1 && isBlank(vm.menu.url)){
                    alert("菜单URL不能为空");
                    return true;
                }
            }
        }
    });

    function getMenuId () {
        var selected = $('#menuTable').bootstrapTreeTable('getSelections');
        if (selected.length == 0) {
            alert("请选择一条记录");
            return null;
        } else {
            return selected[0].id;
        }
    }
</script>
</body>
</html>